<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>首页</title>
  <!-- 引入样式 要注意顺序 -->
  <!-- 重置样式 -->
  <link rel="stylesheet" href="static/css/reset.css">
  <!-- 共同的头部样式 -->
  <link rel="stylesheet" href="static/css/common_header.css">
  <!-- 当前页样式 -->
  <link rel="stylesheet" href="static/css/index.css">
  <!-- 产品展示样式 -->
  <link rel="stylesheet" href="static/css/main.css">
  <!-- 底部样式 -->
  <link rel="stylesheet" href="static/css/footer.css">
</head>

<body>
  <!-- 头部部分 -->
  <div class="header">
    <a href="#" class="logo">
      <img src="static/imgs/logo.png" class="logo-img" alt="">
    </a>
    <div class="header-c">
      <ul class="nav">
        <!-- 激活通过标识位来实现 -->
        <li class="nav-item active">
          <a href="#" class="item-link">首页</a>
        </li>
        <li class="nav-item">
          <a href="#" class="item-link">女装</a>
        </li>
        <li class="nav-item">
          <a href="#" class="item-link">男装</a>
        </li>
        <li class="nav-item">
          <a href="#" class="item-link">箱包</a>
        </li>
        <li class="nav-item">
          <a href="#" class="item-link">配饰</a>
        </li>
      </ul>
      <div class="search-user">
        <input type="text" class="search-input">
        <div class="user-block">
          <a href="#">
            <img src="static/imgs/like.png" class="icon icon-collect" alt="">
          </a>
          <a href="#" class="margin-43">
            <img src="static/imgs/cart.png" class="icon icon-cart" alt="">
          </a>
          <a href="#">
            <img src="static/imgs/user.png" class="icon icon-user" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- banner部分 实现 -->
  <div class="banner">
      <img class="banner-img" src="static/imgs/banner1.jpg" alt="">
   </div>
  <!-- 产品展示部分 -->
 <div class="main">
  <div class="main-c">
     <!-- 新品展示 -->
      <div class="section new">
        <div class="title">
          <img src="static/imgs/时尚首选·新品登场 Fashion ch.png" alt="">
        </div>
        <ul class="list">
          <li class="item">
            <a href="#">
              <img src="static/imgs/编组 5备份.png" alt="">
              <div class="cname">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒</div>
              <div class="size">【S-XL】</div>
              <div class="desc">
                   <span class="price">¥389</span>
                  <img class="cart" src="static/imgs/cart.png" alt="" >
                   <img class="like" src="static/imgs/like.png" alt="" >
              </div>
            </a>
          </li>
          <li class="item">
            <a href="#">
              <img src="static/imgs/编组 5备份.png" alt="">
              <div class="cname">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒</div>
              <div class="size">【S-XL】</div>
              <div class="desc">
                   <span class="price">¥389</span>
                  <img class="cart" src="static/imgs/cart.png" alt="" >
                   <img class="like" src="static/imgs/like.png" alt="" >
              </div>
            </a>
          </li>
          <li class="item">
            <a href="#">
              <img src="static/imgs/编组 5备份.png" alt="">
              <div class="cname">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒</div>
              <div class="size">【S-XL】</div>
              <div class="desc">
                   <span class="price">¥389</span>
                  <img class="cart" src="static/imgs/cart.png" alt="" >
                   <img class="like" src="static/imgs/like.png" alt="" >
              </div>
            </a>
          </li>
          <li class="item">
            <a href="#">
              <img src="static/imgs/编组 5备份.png" alt="">
              <div class="cname">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒</div>
              <div class="size">【S-XL】</div>
              <div class="desc">
                   <span class="price">¥389</span>
                  <img class="cart" src="static/imgs/cart.png" alt="" >
                   <img class="like" src="static/imgs/like.png" alt="" >
              </div>
            </a>
          </li>
          <li class="item">
            <a href="#">
              <img src="static/imgs/编组 5备份.png" alt="">
              <div class="cname">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒</div>
              <div class="size">【S-XL】</div>
              <div class="desc">
                   <span class="price">¥389</span>
                  <img class="cart" src="static/imgs/cart.png" alt="" >
                   <img class="like" src="static/imgs/like.png" alt="" >
              </div>
            </a>
          </li>
          <li class="item">
            <a href="#">
              <img src="static/imgs/编组 5备份.png" alt="">
              <div class="cname">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒</div>
              <div class="size">【S-XL】</div>
              <div class="desc">
                   <span class="price">¥389</span>
                  <img class="cart" src="static/imgs/cart.png" alt="" >
                   <img class="like" src="static/imgs/like.png" alt="" >
              </div>
            </a>
          </li>
        </ul>
    </div>
    <div class="btn">
        <img src="static/imgs/按钮.png" alt="">
    </div>
     <!-- 热卖展示 -->
     <div class="section hot">
      <div class="title">
        <img src="static/imgs/品牌热卖·人气推荐 Hot Sale·P.png" alt="">
      </div>
      <ul class="list">
        <li class="item">
          <a href="#">
            <img src="static/imgs/编组 5备份.png" alt="">
            <div class="cname">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒</div>
            <div class="size">【S-XL】</div>
            <div class="desc">
                 <span class="price">¥389</span>
                <img class="cart" src="static/imgs/cart.png" alt="" >
                 <img class="like" src="static/imgs/like.png" alt="">
            </div>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <img src="static/imgs/编组 5备份.png" alt="">
            <div class="cname">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒</div>
            <div class="size">【S-XL】</div>
            <div class="desc">
                 <span class="price">¥389</span>
                <img class="cart" src="static/imgs/cart.png" alt="" >
                 <img class="like" src="static/imgs/like.png" alt="" >
            </div>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <img src="static/imgs/编组 5备份.png" alt="">
            <div class="cname">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒</div>
            <div class="size">【S-XL】</div>
            <div class="desc">
                 <span class="price">¥389</span>
                 <img class="cart" src="static/imgs/cart.png" alt="" >
                 <img class="like" src="static/imgs/like.png" alt="" >
            </div>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <img src="static/imgs/编组 5备份.png" alt="">
            <div class="cname">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒</div>
            <div class="size">【S-XL】</div>
            <div class="desc">
                 <span class="price">¥389</span>
                <img class="cart" src="static/imgs/cart.png" alt="" >
                 <img class="like" src="static/imgs/like.png" alt="" >
            </div>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <img src="static/imgs/编组 5备份.png" alt="">
            <div class="cname">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒</div>
            <div class="size">【S-XL】</div>
            <div class="desc">
                 <span class="price">¥389</span>
                <img class="cart" src="static/imgs/cart.png" alt="" >
                  <img class="like" src="static/imgs/like.png" alt="" >
            </div>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <img src="static/imgs/编组 5备份.png" alt="">
            <div class="cname">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒</div>
            <div class="size">【S-XL】</div>
            <div class="desc">
                 <span class="price">¥389</span>
                <img class="cart" src="static/imgs/cart.png" alt="" >
                 <img class="like" src="static/imgs/like.png" alt="" >
            </div>
          </a>
        </li>
      </ul>
  </div>
  <div class="btn">
      <img src="static/imgs/按钮.png" alt="">
  </div>
     <!-- 信息媒介展示 -->
    <div class="info">
      <div class="info-title">
        <img src="static/imgs/info2.png" alt="">
        <ul class="info-btn-block">
          <li class="info-btn">实体门店咨询</li>
        </ul>
        <ul class="info-btn-block">
          <li class="info-btn">最新消息</li>
        </ul>
        <ul class="info-btn-block">
         <li class="info-btn">招募资讯</li>
        </ul>
        <ul class="info-btn-block">
         <li class="info-btn">订阅电子报</li>
        </ul>
        <ul class="info-btn-block">
         <li class="info-btn">注册会员</li>
        </ul>
        <ul class="info-btn-block">
         <li class="info-btn">网络商店FAQ</li>
        </ul>
        <ul class="info-btn-block">
         <li class="info-btn">关于BALANCE</li>
        </ul>
        <ul class="info-btn-block">
         <li class="info-btn">政府政令</li>
        </ul>
      </div>
    </div>
  </div>
 </div>
  <!-- 底部 -->
  <div class="footer">
    <div class="footer-c">
    <a href="#" class="logo">
      <img src="static/imgs/log2.png" alt="">
    </a>
    <div class="info">
      <ul class="info-list">
        <li class="list-item">门店资讯 </li>
      </ul>
      <ul class="info-list">
        <li class="list-item">丨</li>
      </ul>
      <ul class="info-list">
        <li class="list-item">门店资讯 </li>
      </ul>
      <ul class="info-list">
        <li class="list-item">丨</li>
      </ul>
      <ul class="info-list">
        <li class="list-item">门店资讯 </li>
      </ul>
      <ul class="info-list">
        <li class="list-item">丨</li>
      </ul>
      <ul class="info-list">
        <li class="list-item">门店资讯 </li>
      </ul>
      <ul class="info-list">
        <li class="list-item">丨</li>
      </ul>
      <ul class="info-list">
        <li class="list-item">门店资讯 </li>
      </ul>
      <ul class="info-list">
        <li class="list-item">丨</li>
      </ul>
      <ul class="info-list">
        <li class="list-item">门店资讯 </li>
      </ul>  
      <img  class="qr" src="static/imgs/qr2.png" alt="">
      <img  class="qr" src="static/imgs/qr2.png" alt="">
      </div>
      <div class="copy">Copyright © BALANCE Ltd. All rights reserved</div>
  </div>
</body>

</html>